<template>
  <el-dialog :title="cacelTitle" :visible.sync="dialogVisible">
    <el-form ref="cancelForm" :model="cancelForm" :rules="cancelRules" >
      <el-form-item :label="cacelLabel" :label-width="formLabelWidth" prop="cancelReason">
        <el-input type="textarea" :rows="4" v-model="cancelForm.cancelReason"  maxlength="200"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="warning" @click="confirmHandle">提 交</el-button>
      <el-button @click="cancelClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
    export default {
      name: 'cancelDialog',
      props: {
        // 确定取消
        confirm: {
          type: Function,
          required: true
        },
        // 标题
        cacelTitle: {
          type: String,
          required: true
        },
        // 标签
        cacelLabel: {
          type: String,
          required: true
        },
        // dialog显示/隐藏
        dialogVisible: {
          type: Boolean,
          default: false
        }
      },
      data () {
        return {
          formLabelWidth: '120px',
          cancelForm: {
            cancelReason: ''
          },
          cancelRules: {
            cancelReason: [
              {required: true, message: '请输入原因', trigger: 'blur'}
            ]
          }
        }
      },
      methods: {
        cancelClose () {
          this.dialogVisible = false
        },
        confirmHandle () {
          // 判断必填项是否填写完毕
          this.$refs['cancelForm'].validate((valid) => {
            if (valid) {
              this.confirm(this.cancelForm.cancelReason)
              this.dialogVisible = false
            }
          })
        }
      }
    }
</script>

<style scoped>

</style>
